<template>
  <div>
    <el-tabs :tab-position="tabPosition" class="demo-tabs" v-if="!isMobile">
      <el-tab-pane v-for="item in cardInfo" :key="item.id" :label="item.title">
        <CardArticle :data="item" />
      </el-tab-pane>
    </el-tabs>
    <div v-else>
      <div v-for="item in cardInfo" :key="item.id">
        <CardArticle :data="item" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { TabsInstance } from "element-plus";
import { useAppStore } from "@/store";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { WIDTH } from "@/utils/commonSize";
const appStore = useAppStore();
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
const tabPosition = ref<TabsInstance["tabPosition"]>("right");
const props = defineProps({
  cardInfo: {
    type: Object,
    required: true,
  },
});
console.log(props.cardInfo);
</script>
<style lang="scss">
:deep(.el-tabs__item.is-active) {
  color: var(--color-primary) !important;
}

:deep(.el-tabs__item:hover) {
  color: var(--color-primary) !important;
}
:deep(.el-tabs__active-bar) {
  background-color: var(--color-primary);
}
</style>
